<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header">总销售额</div>
          <div>126,560</div>
          <div style="height: 40px;
    padding-top: 40px;
    padding-bottom: 25px;">同比 ↑ 12% 环比 ↓ 11%</div>
          <div>日均销售额 ¥12,423</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">每日销售量</div>
          <div>8,846</div>
          <div><img src="../../../assets/1.png"
              style="height: 60px;width: 100%;padding-bottom: 10px;padding-top: 10px;" /></div>
          <div>昨日 12,423</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">客户付款金额</div>
          <div>6,560</div>
          <div><img src="../../../assets/2.png"
              style="height: 60px;width: 100%;padding-bottom: 10px;padding-top: 10px;" /></div>
          <div>回款率 60%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">客户欠款金额</div>
          <div>6,560</div>
          <div><img src="../../../assets/2.png"
              style="height: 60px;width: 100%;padding-bottom: 10px;padding-top: 10px;" /></div>
          <div style="height: 18px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-tabs>
          <el-tab-pane label="销售额">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button-group>
              <el-button>今日</el-button>
              <el-button>本周</el-button>
              <el-button>本月</el-button>
              <el-button>全年</el-button>
            </el-button-group>
            <el-table :data="salesData">
              <el-table-column prop="month" label="月份"></el-table-column>
              <el-table-column prop="amount" label="销售额"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header">销售人员销售额排名</div>
          <el-table :data="salesRanking">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="amount" label="销售额"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dateRange: [],
        salesData: [{
            month: '10月',
            amount: 250
          },
          {
            month: '11月',
            amount: 750
          },
          {
            month: '12月',
            amount: 1000
          },
          // 添加更多数据
        ],
        salesRanking: [{
            name: 'tom1',
            amount: 323234
          },
          {
            name: 'tom2',
            amount: 323234
          },
          // 添加更多数据
        ]
      };
    }
  };
</script>

<style>
  #app {
    padding: 20px;
  }
</style>

<script>
  import nxDataTabs from "@/components/nx-data-tabs/nx-data-tabs";

  export default {
    name: "Report",
    components: {
      nxDataTabs
    },
    data() {
      return {
        columns: 24,
        activeName: "first",
        easyDataOption: {
          span: 6,
          data: [{
              title: "Activity statistics",
              subtitle: "Activity",
              count: 0,
              allcount: 0,
              text: "Number of activities",
              color: "rgb(49, 180, 141)",
              key: "individual"
            },
            {
              title: "Membership statistics",
              subtitle: "member",
              count: 0,
              allcount: 0,
              text: "membership",
              color: "rgb(56, 161, 242)",
              key: "people"
            },
            {
              title: "Product statistics",
              subtitle: "commodity",
              count: 0,
              allcount: 0,
              text: "Quantity of goods",
              color: "rgb(117, 56, 199)",
              key: "species"
            }
          ]
        }
      };
    },
    computed: {},
    watch: {},
    created() {},
    methods: {}
  };
</script>

<style scoped>
  .item {
    margin-bottom: 16px;
  }

  /* .box-card {
  height: 400px;
} */
  .el-card__body {
    padding-bottom: 5px;
  }
</style>
<style lang="scss">
  @import "../../../styles/data-card.scss";
  @import "../../../styles/data-display.scss";
  @import "../../../styles/data-icons.scss";
  @import "../../../styles/data-tabs.scss";
</style>
